<template>
  <a-modal
    :title="title"
    style="top: 100px;"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <a-divider orientation="left">
      考评列表
    </a-divider>
    <!-- 记成效 -->
    <a-card :bordered="false" v-show="showFlag">
      <a-table
        :columns="bonusColumns"
        :data-source="kpLoadData"
        :rowKey="row => row.id"
        :pagination="kppagination"
        :loading="kploading"
        @change="kphandleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="openBonusGrade(record)">打分</a>
        </span>
      </a-table>
    </a-card>
    <!-- 记差错 -->
    <a-card :bordered="false" v-show="!showFlag">
      <a-table
        :columns="deductionColumns"
        :data-source="kpLoadData"
        :rowKey="row => row.id"
        :pagination="kppagination"
        :loading="kploading"
        @change="kphandleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="openDeductionGrade(record)">打分</a>
        </span>
      </a-table>
    </a-card>
    <!-- 近期工作 -->
    <a-divider orientation="left">
      近期工作
    </a-divider>
    <a-card :bordered="false">
      <a-table
        :columns="workColumns"
        :data-source="workLoadData"
        :rowKey="row => row.id"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="openWorkClock(record)">打卡记录</a>
        </span>
      </a-table>
    </a-card>

    <!-- 弹出框 -->
    <score-manage-grade ref="scoreManageGrade" @bonusClose="bonusClose"></score-manage-grade>
    <score-manage-deduction ref="scoreManageDeduction"></score-manage-deduction>
    <work-clock ref="workClock"></work-clock>
  </a-modal>

</template>

<script>
import { STable } from '@/components'
import { query } from '@/api/admin'
import { getWorkInfo, getCate } from '@/api/parBasicData'
import ScoreManageGrade from '@/views/par/scoreManage/ScoreManageGrade'
import ScoreManageDeduction from '@/views/par/scoreManage/ScoreManageDeduction'
import WorkClock from '@/views/par/scoreManage/WorkClock'
export default {
  name: 'ScoreManageRecord',
  components: {
    STable,
    ScoreManageGrade,
    ScoreManageDeduction,
    WorkClock
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      title: '',
      showFlag: false,

      kpLoadData: [],
      // 表头
      bonusColumns: [
        { title: '工作分类', dataIndex: 'kpdlName' },
        { title: '当前加分',
          customRender: function (attr1, record) {
            if (record.itemList[0].dqdf === null || record.itemList[0].dqdf === undefined) {
              return 0
            } else {
              return record.itemList[0].dqdf
            }
          } },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }
        }
      ],
      // 表头
      deductionColumns: [
        { title: '工作分类',
          dataIndex: 'kpgzfl',
          customRender: function (attr1) {
            if (attr1 === '1') {
              return '基础性工作'
            } else if (attr1 === '2') {
              return '指令性工作'
            } else {
              return '综合评定'
            }
          } },
        { title: '考评项目', dataIndex: 'kpxmNames', ellipsis: true },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }
        }
      ],
      workLoadData: [],
      // 表头
      workColumns: [
        { title: '工作类别',
          dataIndex: 'gzlb',
          ellipsis: true,
          customRender: function (attr1) {
            if (attr1 === '1') {
              return '指令性工作'
            } else if (attr1 === '2') {
              return '目标任务问题清单'
            } else {
              return '个人工作备忘'
            }
          } },
        { title: '工作内容', dataIndex: 'gznr', ellipsis: true },
        { title: '开始时间', dataIndex: 'kssj', ellipsis: true },
        { title: '截止时间', dataIndex: 'jzsj', ellipsis: true },
        { title: '周期',
          dataIndex: 'zq',
          ellipsis: true,
          customRender: function (attr1, record) {
            if (attr1 === '1') {
              return '年'
            } else if (attr1 === '2') {
              return '季度'
            } else if (attr1 === '3') {
              return '月'
            } else if (attr1 === '4') {
              return '周'
            } else if (attr1 === '5') {
              return '日'
            } else {
              return record.zdyzq
            }
          } },
        { title: '延期原因', dataIndex: 'yqyy', ellipsis: true },
        { title: '工作状态',
          dataIndex: 'gzzt',
          ellipsis: true,
          customRender: function (attr1) {
            if (attr1 === '1') {
              return '已完成'
            } else {
              return '未完成'
            }
          } },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
      ],
      pagination: {
        total: 0,
        pageSize: 5, // 每页中显示5条数据
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '20', '50'], // 每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
      },
      loading: true,
      queryParam: {
        zxrlb: '1',
        pageNo: 1, // 第几页
        pageSize: 5// 每页中显示数据的条数
      },
      kppagination: {
        total: 0,
        pageSize: 10, // 每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50'], // 每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
      },
      kploading: true,
      kpqueryParam: {
        pageNo: 1, // 第几页
        pageSize: 10// 每页中显示数据的条数
      }
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {

  },
  methods: {
    /**
     * 记成效
     */
    bonus (record) {
      this.showFlag = true
      this.title = '加分'
      this.queryParam.kssj = record.kssj
      this.queryParam.jssj = record.jssj
      this.queryParam.zxr = record.zxrCode
      this.getWorkInfo(this.queryParam)
      this.kpqueryParam.kpnrlx = '1'
      this.kpqueryParam.kpjhbid = record.kpjhbid
      this.kpqueryParam.kpbid = record.id
      this.getCate(this.kpqueryParam)
      this.visible = true
    },
    /**
     * 记差错
     */
    deduction (record) {
      this.showFlag = false
      this.title = '扣分'
      this.queryParam.kssj = record.kssj
      this.queryParam.jssj = record.jssj
      this.queryParam.zxr = record.zxrCode
      this.getWorkInfo(this.queryParam)
      this.kpqueryParam.kpnrlx = '2'
      this.kpqueryParam.kpjhbid = record.kpjhbid
      this.kpqueryParam.kpbid = record.id
      this.getCate(this.kpqueryParam)
      this.visible = true
    },
    close () {
      this.$emit('close')
      this.form.resetFields()
      this.workLoadData = []
      this.pagination = {
        total: 0,
        current: 1,
        pageSize: 5, // 每页中显示5条数据
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '20', '50'], // 每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
      }
      this.queryParam = {
        zxrlb: '1',
        pageNo: 1, // 第几页
        pageSize: 5// 每页中显示数据的条数
      }
      this.kpLoadData = []
      this.kppagination = {
        total: 0,
        current: 1,
        pageSize: 10, // 每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50'], // 每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
      }
      this.kpqueryParam = {
        pageNo: 1, // 第几页
        pageSize: 10// 每页中显示数据的条数
      }
      this.visible = false
    },
    handleOk () {
      this.close()
    },
    handleCancel () {
      this.close()
    },
    /**
     * 打开记成效评分框
     */
    openBonusGrade (record) {
      this.$refs.scoreManageGrade.bonus(record)
    },
    /**
     * 打开选择记差错项目内容
     */
    openDeductionGrade (record) {
      this.$refs.scoreManageDeduction.deduction(record)
    },
    /**
     * 获取近期工作
     */
    getWorkInfo (param) {
      getWorkInfo(param).then(res => {
        this.workLoadData = res.result.data
        const pagination = { ...this.pagination }
        pagination.total = res.result.totalCount
        this.pagination = pagination
        this.loading = false
      })
    },
    handleTableChange (pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.pageNo = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getWorkInfo(this.queryParam)
    },
    /**
     * 获取考评列表
     */
    getCate (param) {
      this.kploading = true
      getCate(param).then(res => {
        this.kpLoadData = res.result.data
        const pagination = { ...this.kppagination }
        pagination.total = res.result.totalCount
        this.kppagination = pagination
        this.kploading = false
      })
    },
    kphandleTableChange (pagination) {
      this.kppagination.current = pagination.current
      this.kppagination.pageSize = pagination.pageSize
      this.kpqueryParam.pageNo = pagination.current
      this.kpqueryParam.pageSize = pagination.pageSize
      this.getWorkInfo(this.getCate)
    },
    bonusClose () {
      this.getCate(this.kpqueryParam)
    },
    openWorkClock (record) {
      this.$refs.workClock.deduction({ id: record.id })
    }

  }
}
</script>
